<template>
  <p :class="$style['controller-current']" class="flc">
    <span :class="$style['controller-current-name']">{{ currentName }}</span>
    <span v-if="treeStore.current" :class="$style['controller-current-time']">{{ currentTime }}/{{ totalTime }}</span>
  </p>
</template>

<script
  lang="ts"
  setup
  name="ControllerCurrent"
>
import useCurrent from '@/hooks/controller/useCurrent';

const { treeStore, currentName, totalTime, currentTime } = useCurrent()

</script>

<style
  module
  lang="scss"
>
.controller-current {
  @apply relative z-1 flex flex-col items-start flex-1;
  width: calc(100% - 55px);

  .controller-current-name {
    @apply overflow-ellipsis overflow-hidden;
    width: 90%;
    height: 1.1em;
    font-size: 13px;
    font-weight: bold;
    color: #265786;
    line-height: 1.1;
    margin-bottom: 8px;
    white-space: nowrap;
  }

  .controller-current-time {
    height: 1.1em;
    font-size: 10px;
    color: #265786;
    line-height: 1.1;
  }
}
</style>
